<!-- 师傅分单 -->
<template>
	<view>
	<view class="main">
		<view class="avatar-info">
			<input type="text"
			  placeholder="请输入运单号、品名、收货人电话查询"
			  v-model="inputValue"
			  class="contact-info"
			  @input="searchItemsByKeyword">
			  </input>
		</view>
		<div v-if="items.length === 0" class="empty-state">
		    <img src="../../../static/空数据.png" style="height:150px;width: 180px;">
			<p style="font-size: 20px;text-align: center;">暂无数据!</p>
		</div>
		<div v-else>
		<div v-for="(item, index) in queryResult" :key="index" class="outer-content-list" >
			<view class="content">
				<view class="content-list">
					<p class="avatar-list">
					<span class="options-yun">运单号</span>
					<!-- <span class="delivery-options" v-if="item.waybillNumber!=null">{{item.waybillNumber}}</span> -->
					<span class="delivery-options1" v-if="item.waybillNumber!=null">{{item.waybillNumber}}</span>
					<span class="price">费用</span>
					<span class="money" v-if="item.sanbaoCost!=null">￥{{item.sanbaoCost.toFixed(2)}}</span>
					<!-- <span class="money">￥{{item.sanbaoCost.toFixed(2)}}</span> -->
					</p>
				</view>
			</view>
		<view class="content-list-1">
			<p class="avatar-list">
			<span class="shipment">货件信息</span>
			<span class="description" v-if="item.description!=null">{{item.description}}</span>
			<span class="algebra" v-if="item.number!=null">{{item.number}}件</span>
			<span class="one"> 1 </span>
			<span class="kg" v-if="item.weight!=null">{{item.weight}}kg</span>
			<span class="meter" v-if="item.volume!=null">{{item.volume}}m</span>
			</p>
		</view>
		<view class="content-list-6">
			<p class="avatar-list">
			<span class="options">收货人</span>
			<span class="delivery-options" v-if="item.putUserName">{{item.putUserName}}</span>
			<span class="delivery-number" v-if="item.putPlane">{{item.putPlane}}</span>
			<span class="delivery-icon"><image src="../../../static/电话.png"></image></span>
			</p>
		</view>
		<view class="content-list-7">
			<p class="avatar-list">
			<span class="options">送货地址</span>
			<span class="delivery-optionsa" v-if="item.destinationStation!=null">{{item.destinationStation}}<span v-if="item.putDetailAddress!=null">{{item.putDetailAddress}}</span></span>
			<view class="delivery-axis" @click="HeadMap(index,item)"><image src="../../../static/坐标.png"></image></view>
			</p>
		</view>
		<view class="content-list-13">
			<p class="avatar-list13">
			<span class="options-remark">备注说明</span>
			<span class="delivery-options"></span>
			</p>
		</view>
		<view class="content-list-14">
			<p class="avatar-button">
			<button class="lading" @click="showInputModal(item, index)">√分单</button>
			</p>
		</view>
		<div class="end"></div>
		</div>
		</div>
		<view>
			<div class="end2" v-if="items.length > 0" ></div>
		</view>
		<view class="content-list-15">
			<p class="avatar-order">
			<text>合计： {{items.length}}条记录</text>
			</p>
		</view>
	</view>
	<BillModal ref="inputModal" @add-item="handleAddItem" :businessId="businessId"/>
	</view>
</template>

<script>
	import BillModal from '@/pages/components/BillModal/BillModal.vue';	
	import {getBill} from '@/api/bill.js';
	export default {
		components: {
			BillModal
		 },
		data() {
			return {
				items:[],
				businessId:0,
				inputValue:'',
				queryResult:[]
			}
		},
		onLoad(options) {
			this.phone=options.phone
			this.userId=options.userId
		    },
		mounted(){
			getBill({contactInformation: this.phone}).then(res =>{
				this.items=res.data.data
				this.queryResult=res.data.data
			}).catch((error) => {
			});
		},
		methods: {
			HeadMap(index,item){
				console.log("地图");
				const address=item.destinationStation
				const latitudeId=item.destinationLatitude
				console.log(latitudeId);
				uni.navigateTo({
					url: '/pagesA/index/map/map?address='+address+'&latitudeId='+latitudeId// 请注意，这里的url应为相对路径，且以'/'开头
				});
			},
			searchItemsByKeyword() {
				 let keyword = '';
				  if (this.inputValue !== undefined && this.inputValue !== null) {
				      keyword = this.inputValue.toLowerCase();
				  }else{
					  this.items
				  }
			        this.queryResult  = this.items.filter(item => {
			            return (
							(item.waybillNumber !== null &&item.waybillNumber.toLowerCase().includes(keyword)) ||
							(item.description !== null &&item.description.toLowerCase().includes(keyword)) ||
							(item.putUserName !== null &&item.putUserName.toLowerCase().includes(keyword)) ||
							(item.putPlane !== null &&item.putPlane.toLowerCase().includes(keyword))
			            );
			        });
					// this.items=this.queryResult;
			    },
			handleAddItem(){
				getBill({contactInformation: this.phone}).then(res =>{
					this.items=res.data.data
					this.queryResult=res.data.data
				}).catch((error) => {
				});
			},
			showInputModal(item, index) {
				this.businessId=item.id;
				console.log(this.businessId)
				const userId=this.userId
			      this.$refs.inputModal.showModal('预约', {
			        onConfirm: (value) => {
			          console.log('用户输入:', value);
			          // 在这里处理用户输入的内容
			        },
			        onCancel: () => {
			          console.log('用户取消了输入');
			        }
			      },userId);
			    },
		}
	}
</script>

<style scoped>
@import "bill.css";
</style>
